<template>
	<view class="top">
		<view class="back-btn" @click="backPage()">
			<view class="back-icon"></view>
		</view>
		<view style="color: white;text-align: center;">活动发布</view>
		<uni-card class="card">
			<view class="items">
				<text>标题：</text>
				<input type="text" v-model="formdatafabu.title"></input>
			</view>
			<view class="items">
				<text>内容：</text>
				<input type="rich-text" class="area" v-model="formdatafabu.content"></input>
				<!-- <textarea class="area" v-model="formdatafabu.content"></textarea> -->
			</view>
			<view class="img-row">
				<text @click="uploadImg('img')">图片/视频：</text>
				<image v-if="formdatafabu.img" :src="formdatafabu.img" class="img-upload"></image>
				<view v-else class="img-placeholder"><br/>+上传照片</view>
			</view>
		<!-- 	<uni-file-picker
			v-model="formdatafabu.img"
			fileMediatype="image"
			mode="grid"
			@select="select"
			> -->
			<!-- </uni-file-picker> -->

		</uni-card>
		<button class="bottom" @click="fabuhuodong">
			发布666
		</button>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	//引入封装的request
	import request from '../../../util/request';
	import baseUrl from '../../../util/urlConfig';

	const now = new Date();

	// // 获取年、月、日、时、分、秒
	const year = now.getFullYear(); // 年份（如: 2023）
	const month = now.getMonth() + 1; // 月份（0-11，需+1）
	const date = now.getDate(); // 日期（1-31）
	const hours = now.getHours(); // 小时（0-23）
	const minutes = now.getMinutes(); // 分钟（0-59）
	const seconds = now.getSeconds(); // 秒（0-59）
	const nowtime = `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`
	// console.log(`${year}-${month}-${date} ${hours}:${minutes}:${seconds}`);
	console.log(nowtime)
	// 结束时间
	const end = new Date();
	// // 获取年、月、日、时、分、秒
	const endyear = now.getFullYear(); // 年份（如: 2023）
	const endmonth = now.getMonth() + 1; // 月份（0-11，需+1）
	const enddate = now.getDate() + 7; // 日期（1-31）
	const endhours = now.getHours(); // 小时（0-23）
	const endminutes = now.getMinutes(); // 分钟（0-59）
	const endseconds = now.getSeconds(); // 秒（0-59）
	const endnowtime = `${endyear}-${endmonth}-${enddate} ${endhours}:${endminutes}:${endseconds}`
	console.log(endnowtime)





	function backPage() {
		uni.navigateBack()
	}
	// console.log(localStorage.merchant)
	const c = uni.getStorageSync("merchant");
	const vc = uni.getStorageSync("VMerchant")
	console.log(c)

	console.log(c.mobile)
	const formdatafabu = ref({
		title: '',
		content: '',
		img: '',
		mid: c.id,
		time: nowtime,
		end_time: endnowtime,
		telephone: vc.mobile
	})

	const fabuhuodong = () => {
		console.log("点击了发布按钮")
		request({
			url: baseUrl + '/ly/activities',
			method: "POST",
			data: {
				title: formdatafabu.value.title,
				content: formdatafabu.value.content,
				img: formdatafabu.value.img,
				mid: formdatafabu.value.mid,
				time: formdatafabu.value.time,
				endTime: formdatafabu.value.end_time,
				telephone: formdatafabu.value.telephone
			},
			success(res) {
				console.log(formdatafabu._rawValue);

			}
		})
	}

	//上传图片
	const uploadImg = async (key) => {
		uni.chooseImage({
			count: 1,
			success: res => {
				formdatafabu.value[key] = res.tempFilePaths[0]
				console.log(formdatafabu.value.img);
				console.log(res)
				uni.uploadFile({
					url: baseUrl + '/file/upload',
					name: 'file',
					method: 'POST',
					filePath: res.tempFilePaths[0],
					success(res) {
						console.log(res);
						const result = JSON.parse(res.data);
						formdatafabu.value[key] = result.data.url;
						console.log(form.value[key]);
					}

				})
			}
		})
	}

	//===================================================
	//查询用户列表,,获取id
	const yonghulist = ref({
		ids: []
	})
	const chaxunyonghu = () => {
		request({
			url: baseUrl + '/wwc/user/list',
			method: "GET",
			success(res) {
				console.log(res.data),
					yonghulist.value.ids = res.data.rows.map(user => user.id)
				console.log('用户ID列表:', yonghulist.value.ids)
			}
		})
	}

	//websocket
	// data中定义对象
	const ws = ref() // WebSocket 实例
	let userId = c.id // 用户id
	console.log("==================" + userId)
	const mess = ref('')


	//链接socket
	function getSocket() {
		// 注意25就是以后登录后的用户的真实id即可
		ws.value = new WebSocket("ws://localhost:9403/myws/" + userId.value);
		// 监听 WebSocket 打开事件
		ws.value.onopen = () => {
			console.log("yonghu" + userId + 'WebSocket 已连接');
			// 连接成功后可以发送数据
			ws.value.send("登录消息" + 'Hello, WebSocket!');
		}

		// 监听 WebSocket 消息事件
		ws.value.onmessage = (event) => {
			const data = event.data;
			console.log('收到 WebSocket 消息:', data);
			// 处理接收到的数据
		}
	}

	// 发送消息到 WebSocket 服务器
	function sendmess() {
		ws.value.send(mess.value)
	}

	// 关闭 WebSocket 连接
	function closeWebSocket() {
		if (ws.value) {
			ws.value.close();
		}
	}


	function toIndex() {
		uni.navigateTo({
			url: '../pages/index/index'
		})
	}

	chaxunyonghu();
	getSocket()
</script>

<style>
	@import url('@/common/app.css');

	.card {
		margin: 0;
		height: 1200rpx;
	}

	input {
		width: 450rpx;
		height: 40rpx;
		padding: 15rpx;
		border: lightgrey 1px solid;
		border-radius: 50rpx;
	}

	.items {
		display: flex;
		justify-content: space-between;
		align-items: start;
		margin-bottom: 20rpx;
	}

	.area {
		width: 450rpx;
		height: 500rpx;
		padding: 15rpx;
		border: lightgrey 1px solid;
		border-radius: 10rpx;
	}

	.bottom {
		color: white;
		background-color: #0863e7;
		width: 500rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 100rpx;
		position: fixed;
		bottom: 100rpx;
		left: 125rpx;
		font-size: 30rpx;
	}

	.back-btn {
		margin-left: 20rpx;
		width: 50rpx;
		height: 50rpx;
		position: relative;
	}

	.back-icon {
		width: 30px;
		height: 30px;
	}

	.back-icon::before {
		content: "";
		position: absolute;
		width: 20px;
		height: 2px;
		background-color: #fff;
		top: 80rpx;
		left: 47rpx;
		transform: translate(-50%, -50%);
	}

	.back-icon::after {
		content: "";
		position: absolute;
		width: 10px;
		height: 10px;
		border-left: 2px solid #fff;
		border-bottom: 2px solid #fff;
		transform: rotate(45deg);
		top: 70rpx;
		left: 30rpx;
	}
	.img-row {
		display: flex;
		flex-direction: row;
		gap: 24rpx;
		margin-bottom: 20rpx;
	}
	
	.img-upload {
		width: 150rpx;
		height: 150rpx;
		background: #f5f6fa;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		border: 2rpx dashed #e0e0e0;
		overflow: hidden;
	}
	
	.img-placeholder {
		color: #bbb;
		font-size: 32rpx;
		text-align: center;
		line-height: 44rpx;
	}
</style>